<template>
    <view class="page">
        <view class="box" v-for="item in list" :key="item.id">
            <view class="item-1">{{ item.company_name }}</view>
            <view class="item">金额 <span>￥{{ item.invoice_amount||'0' }}</span></view>
            <view class="item">申请时间 <span>{{ item.created_at }}</span></view>
            <view class="item" v-if="item.invoice_date">开票时间 <span>{{ item.invoice_date }}</span></view>
            <view class="item">状态 <span style="color: #FFBB50;">{{ invoice_status[item.status] }}</span></view>
            <view class="detail" @click="handleNav(item.id)">查看详情</view>
        </view>
    </view>
</template>
<script>
import { invoicingHistory } from "@/utils/request.js";
export default {
  data() {
    return {
      show: false,
      count:0,
      list:[],
      invoice_status:{},
      invoice_type:{},
      query:{
        p:0,
        n:10
      }
    };
  },
  onLoad(){
    this.getInit()
  },
  onReachBottom(){
    if(this.list.length<this.count){
      this.query.p++
      this.getInit()
    }
  },
  methods:{
    async invoicingHistory(data){
      return await invoicingHistory(data)
    },
    getInit(){
      this.invoicingHistory(this.query).then(res=>{
        if(res){
          this.list=[...res.list,...this.list]
          this.invoice_status=res.invoice_status
          this.invoice_type=res.invoice_type
          this.count=res.count
        }
      })
    },
    handleNav(id){
        uni.navigateTo({ url: './invoiceDetail?id='+id })
    },
  }
};
</script>
<style lang="scss" scoped>
.page{
  padding-top: 28rpx;
}
.box{
    width: 630rpx;
    margin: 0 auto 20rpx;
    border-radius: 12rpx;
    background: #ffffff;
    padding: 20rpx 32rpx 0;
    .item-1{
        font-size: 24rpx;
        color: #000000;
    }
    .detail{
        padding: 20rpx 0;
        margin-top: 14rpx;
        border-top: 1rpx solid #f2f2ff;;
        text-align: center;
        font-size: 27rpx;
        color:#FFBB50;
    }
    .item{
        padding: 10rpx 0;
        font-size: 24rpx;
        color: #7F7F7F;
        span{
            color: #333333;
            margin-left: 20rpx;
        }
    }
}
</style>